<?php
    require_once 'include_dao.php';
    ini_set("display_errors", $DISPLAY_ERROR);

    $Contenidos = DAOFactory::getContenidoDAO()->queryByIdLista($LISTA_RESPONSABILIDAD);
    $contenido = null;
?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="./resources/css/frontend.css" media="screen" />
        <script type="text/javascript" src="./resources/js/jquery-1.6.2.js"></script>
        <script type="text/javascript" src="./resources/js/jquery.jcarousel.js"></script>
        <link rel="stylesheet" type="text/css" href="./resources/css/tango/skin.css" />
        <link rel="stylesheet" type="text/css" href="./resources/css/ie7/skin.css" />
        <style type="text/css">


            body{
            margin:0px;
            padding: 0px;
            /*background: url(resources/img/fondoresponsabilidad.png) no-repeat;*/

            }
            .capaprincipal{
                padding:0;
                font-size:12px;
                margin:0;
                width: 890px;
                }

            .capa{
                margin: 0px;
                padding: 0px;
                background: url(resources/img/contenidosrespSoc2.png) no-repeat;
                height: 400px;
                width: 460px;
                
            }

            
            #conten_div {
                height: 240px;
                width: 430px;
            }

            .desplazador{width: 890px;
                        height: 156px;
                        background: url(resources/img/slayer.png);
                        
            }


            .menu{height: 35px; color:#437B27; font-size: 14px; font-weight: bold}
            .menu a {text-decoration: none; color:#437B27; font-size: 14px; font-weight: bold}
            .menu a.hover {color:#437B27; font-size: 14px; font-weight: bold}

            #navi {
                    list-style:none;
                    margin:0;
                    padding:0;
                }

            #navi li {
                margin:6px;
                padding:0;
                float:left;
            }

            #navi li img {
                display:block;
                width:120px;
                text-decoration:none;
                text-align:center;
                font-size:11px;
                color:#FFFFFF;
            }

            .titulotexto
            {
                text-align: center;
                color: #407928;
                border-bottom: 1px solid #407928;
                border-top: 1px solid #407928;
                font-weight: bold;
                font-size: 24px;
                padding: 3px;
            }

            a {text-decoration: none; color:#437B27; font-size: 14px; font-weight: bold; cursor: pointer;}
            
            #navi li a:hover {
                color:#99CC00;
            }

        </style>
        <script type="text/javascript" >
        $(document).ready(function(){

            jQuery('#mycarousel').jcarousel({
                    wrap: 'circular',
                    visible: 6
                 });

            jQuery("#carruseltexto").jcarousel({
                    wrap: 'circular',
                    visible:3
            });
        });
    </script>
    </head>

    <body>
        <div class="capaprincipal">
            <table width="100%" cellpadding="0" cellspacing="0">
                <tr>
                    <td style="width: 460px;">
                        <div class="capa">
                            <?php
                            if(!isset($_GET["idContenido"]) && count($Contenidos)>0){
                               $contenido = $Contenidos[0];
                            }else{
                                $contenido = DAOFactory::getContenidoDAO()->load($_GET["idContenido"]);
                            }
                            ?>
                            <table width="100%">
                                <tr>
                                    <td colspan="2" style="text-align: center;">
                                        <img src="resources/img/The-pub-solo-sin-titulo.gif" alt="" width="200"/>
                                        <div style="text-align: center; padding: 3px">
                                            <span class="titulotexto">
                                        <?php
                                        if($_SESSION['_IDIOMA']==$IDIOMA_ESP)
                                            echo $contenido->nombreEsp;
                                        else
                                            echo $contenido->nombreIng;

                                        $resultado_fotos = NULL;
                                        if($contenido->albumId != NULL)
                                            $resultado_fotos = DAOFactory::getFotoDAO()->queryByIdAlbun($contenido->albumId);
                                        ?>
                                            </span>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="2" valign="top">
                                        <div id="conten_div" class="contenido">
                                            <?php
                                              if($_SESSION['_IDIOMA']==$IDIOMA_ESP)
                                                echo $contenido->contenidoEsp;
                                              else
                                                echo $contenido->contenidoIng;
                                             ?>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="2" align="center">
                                        <table width="100%" border="1">
                                            <tr>
                                                <td>
                                                    <ul id="carruseltexto" class="jcarousel-skin-ie7">
                                                        <?php
                                                            if(count($Contenidos)>0)
                                                            {
                                                                for($i = 0; $i < count($Contenidos); $i++)
                                                                {
                                                                    if($_SESSION['_IDIOMA']==$IDIOMA_ESP)
                                                                     echo "<li><a href='RespSocial.php?idContenido=".$Contenidos[$i]->id."'>".$Contenidos[$i]->nombreEsp."</a></li>";
                                                                    else
                                                                     echo "<li><a href='RespSocial.php?idContenido=".$Contenidos[$i]->id."'>".$Contenidos[$i]->nombreIng."</a></li>";
                                                                }
                                                            }
                                                        ?>
                                                    </ul>
                                                </td>
                                            </tr>
                                        </table>
                                   </td>
                                </tr>
                            </table>
                        </div>
                    </td>
                    <td valign="middle" style="width:430px">
                        
                        <img id="imagenvisible" src="<?php  
                        if($resultado_fotos != NULL)
                            if(count($resultado_fotos)>0)
                                echo substr($resultado_fotos[0]->imagen,3);
                            ?>" width="430" height="410" alt=""/>
                    </td>
                </tr>
            </table>
                <div class="desplazador">
                    <br>
                    <ul class="jcarousel-skin-tango" id="mycarousel">
                       <?php
                        if($resultado_fotos != NULL)
                            if(count($resultado_fotos)>0)
                                imagenes($resultado_fotos);
                        ?>
                    </ul>
                </div>
        </div>
        <script type="text/javascript">
            $(document).ready(function(){
            <?php
                for($i=0;$i<count($resultado_fotos);$i++)
                {
                 echo "$('#imapub".$resultado_fotos[$i]->id."').click(function(){
                        var strimg =  $('#imapub".$resultado_fotos[$i]->id."').attr('src');
                        $('#imagenvisible').css('visibility', 'visible');
                        $('#imagenvisible').attr('src', strimg);
                        $('#imagenvisible').attr('width',430);
                        $('#imagenvisible').attr('height',410);
                    });";
                }
            ?>

                //$('#imagenvisible').prepend('<img id="meta" src="resources/img/miniaturas.gif" />');
                //$("#meta").css({'z-index':'9','position':'absolute','float':'left'});

            });
    </script>
    </body>
</html>

<?php
function imagenes($resultado_fotos)
{
   for($i=0;$i<count($resultado_fotos);$i++){
         echo "<li><img width='100' id='imapub".$resultado_fotos[$i]->id."' src='". substr($resultado_fotos[$i]->imagen,3) ."' alt=''></li>";
     }
}
?>